<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>微信签到系统-用户管理</title>
	<link rel="stylesheet" href="./css/bootstrap.css">
	<script src="./js/jquery.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<style>
		.control-group{
			margin-bottom:15px;
		}
		.table tr th,.table tr td{
			text-align: center;
		}
		.title h3{
			font-size:18px;
			margin:5px 0 5px 0;
			border-left:5px solid #eee;
			padding:3px 5px;
		}
	</style>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
                 <button class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
                 </button>
                <a href="home" class="navbar-brand">微信签到系统</a>
          </div>
          <div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="nav navbar-nav" style="margin-top:0">
				<li class="active"><a href="teacher">教师管理</a></li>
          		<li><a href="teacher?method=class">班级管理</a></li>
			</ul>
			<!-- 
				<a href="#" class="navbar-text navbar-link">超链接</a>
			 -->
			 <p class="navbar-text navbar-right">
			 	${adminInfo.roleName }：<a href="#">${adminInfo.username }</a> | 
			 	<a href="adminManager?method=logout">退出</a>
			 </p>
		</div>
	</div>
</nav>

<div class="main container" style="margin-top:60px;">
	<ol class="breadcrumb">
		<li><a href="teacher?method=class">教师管理</a></li>
		<li class="active">教师[${teacherInfo.username }]班级管理</li>
	</ol>
	<div class="table-container table-responsive">
		<div class="col-md-3"></div>
			<div class="col-md-6 login" >
				<c:if test="${regError!=null }">
					<div class="alert alert-danger" style="margin:10px auto;">${regError }</div>
				</c:if>
				<form method="post" action="teacher?method=teacher-class-save" class="form-horizontal">
					<input type="hidden" name="pid" value="${teacherInfo.pid }"/>
					<div class="control-group">
						 <label class="control-label" for="inputUsername">用 户 名</label>
						  <input id="inputUsername" class="form-control" type="text" 
						  value="${teacherInfo.username }" readonly="readonly"
						  placeholder="请输入英文或数字作为用户名"/>
					</div>
					<div class="control-group">
						 <label class="control-label" for="inputFullnamel">姓　　名</label>
						  <input id="inputFullnamel" class="form-control" type="text" 
						  value="${teacherInfo.fullname }" readonly="readonly"
						  placeholder="请填写真实姓名"/>
					</div>
					
					<div class="control-group">
						 <label class="control-label" for="classCids">全部的班级（选中进行添加）</label>
						 <div class="input-group allClassList">
						 	<c:forEach items="${allClassList}" var="obj">
								<label class="checkbox-inline">
									<input type="checkbox" value="${obj.cid }" onchange="changeClass(this)" className="${obj.className }">${obj.className }
								</label>
							</c:forEach>
						</div>
					</div>
	
					<div class="control-group">
						<label class="control-label" for="classCids">已管理的班级</label>
						<table class="table table-striped table-hover table-responsive">
							<thead>
								<tr><td>ID</td><td>班级</td></tr>
							</thead>
							<tbody class="classTable">
								<c:forEach items="${teacherInfo.classList}" var="obj">
									<tr  class="classIds cid-${obj.cid }" cid="${obj.cid }">
									<td><input type="hidden" name="cid" value="${obj.cid }" />${obj.cid }</td>
									<td>${obj.className }</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
					<div class="control-group" style="text-align:center;">
					   <button type="button" class="btn btn-info" style="margin-right:25px;" onclick="submitSave(this)">确认修改</button>
						<a href="teacher"  class="btn btn-primary">反回上级</a>
					</div>
				</form>
				</div>
				<div class="col-md-3"></div>
		</div>
	</div>
<script>

$(function(){
	checkedMyClass();
})

function changeClass(thisObj){
	var checked = $(thisObj).prop("checked");
	cid = $(thisObj).val();
	if(checked){
		//添加
		className = $(thisObj).attr("className");
		tr = "<tr class='classIds cid-"+cid+"' cid='"+cid+"' ><td><input type='hidden' name='cid' value="+cid+" />"+cid+"</td><td>"+className+"</td></tr>";
		$(".classTable").append(tr);
	}else{
		//移除
		$(".cid-"+cid).remove();
	}
}

function submitSave(thisObj){
	var form = $(".form-horizontal").serialize();
	$.ajax({
		type:"post",
		url:"teacher?method=teacher-class-save",
		data:form,
		beforeSend:function(){
			console.log(form);
		},
		success:function(rsp){
			obj = $.parseJSON(rsp);
			if(obj.rspCode==0000){
				location.reload();
			}else{
				alert("操作失败："+obj.rspDesc);
			}
		},
		error:function(err,status){
			alert("操作失败："+err.status);
		}
	});
	
}

function checkedMyClass(){
	var classIds = $(".classIds");
	var allClass = $(".allClassList").find("input[type=checkbox]");
	if(classIds.length>0){
		for(var i=0 ; i<classIds.length ;i++){
			for(var j=0 ; j<allClass.length; j++){
				if(classIds.eq(i).attr("cid")==allClass.eq(j).val()){
					allClass.eq(j).prop("checked",true);
					break;
				}
			}
		}
	}
	
}
		
	
</script>

</body>
</html>